<template>
    <div class="activity">
        <div>
            <nut-tabs @change="tabChange" v-model="value" title-scroll title-gutter="10" v-if="activityTitleList">
                <nut-tab-pane :title="t(g)" :pane-key="i" v-for="(game, g, i) in activityTitleList" :key="g">
                    <!-- {{ game }} -->
                    <div class="img_box">

                        <template v-for="(v, index) in game" :key="index">
                            <img class="imgs" v-if="hasPic(v.pic_link)" :src="hasPic(v.pic_link)"
                                @click="activityDetail(v)" alt="" />
                        </template>
                    </div>
                </nut-tab-pane>
            </nut-tabs>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';

import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import { NetPacket } from '@/netBase/NetPacket';
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { Session } from '@/utils/storage';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';

const { t } = useI18n();
const { activityTitleList } = storeToRefs(User(pinia));

const router = useRouter();
const value = ref(0)
const handleActivetys = async (res: any) => {
    // let promoArr: any = []
    // res.promo.map((e: any) => {
    //     if (t(e.pic_link).indexOf('http') != -1) {
    //         promoArr.push(e)
    //     }
    // })
    await User(pinia).setActivityList(res.promo)
}
const hasPic = (str: string) => {
    if (t(str).indexOf('http') != -1) {
        return t(str)
    } else {
        return ''
    }
}
const tabChange = (item: any) => {
    value.value = item.paneKey
    Session.set('activityNum', item.paneKey)

}
const activityDetail = (item: any) => {
    let str = item.content.split('_')
    if (str.length > 0) {
        str = str[0] + '_mobile_' + str[1] + '_' + str[2]
    }

    router.push({
        path: 'activityDetail',
        query: {
            detail: str
        }
    })
}
onMounted(async () => {
    value.value = Session.get('activityNum') || 0

    document.documentElement.style.overflow = 'hidden'
    document.body.style.overflow = 'hidden';
    //获取所有活动 
    const req = NetPacket.req_activites();
    req.show = 0
    // Net.instance.sendRequest(req);
    H5Websocket.sendMessageHandler(req);
    MessageEvent2.addMsgEvent(
        NetMsgType.msgType.msg_notify_activites,
        handleActivetys
    );
});
onUnmounted(() => {
    document.documentElement.style.overflow = 'visible'
    document.body.style.overflow = 'visible';
})
</script>

<style lang='scss' scoped>
.activity {
    // height: 80vh;
    // overflow: hidden;

    >div {
        padding: 10px 10px 0px;
        // position: fixed;
        width: 100%;
        // height: 100%;

    }

    // .main_content {
    //     height: 90vh;
    // }

    .img_box {
        max-height: 80vh;
        padding-bottom: 80px;
        overflow-y: auto;
    }

    .imgs {
        width: 100%;
        margin-bottom: 3px;
    }

}
</style>